<#import "/includes/layout.html" as defaultLayout>
	<@defaultLayout.layout>
<div class="layui-fluid">
			<div class="layui-card">
				<div class="layui-card-header layuiadmin-card-header-auto">
					<form id="searchForm" class="layui-form" lay-filter="searchForm">
						<div class="layui-form-item">
							<div class="layui-inline">
								<div class="layui-input-inline">
									<input class="layui-input" name="title" autocomplete="off" placeholder="输入关键字" />
								</div>
							</div>
							<div class="layui-inline">
								<button class="layui-btn" lay-submit lay-filter="searchForm"><i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>查询</button>
								<button type="button" class="layui-btn layuiadmin-btn-list layui-btn-primary"  data-type="clean">
									<i class="layui-icon layui-icon-refresh layuiadmin-button-btn"></i>重置</button>
							</div>
						</div>
					</form>
				</div>
				<div class="layui-card-body">
					 <div id="main" class="main"></div>
				</div>
			</div>
		</div>
<style type="text/css">
.main {
    height: 400px;
    /*width: 778px !important;*/
    overflow: hidden;
    padding : 10px;
    margin-bottom: 10px;
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
       -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
</style>
<script src="${_context}/static/echarts/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var myChart = echarts.init(document.getElementById('main')); //  初始化
	layui.extend({
		index: 'lib/index' //主入口模块
	}).use(['index', 'select', 'form', 'dialoger'], function () {
		var $ = layui.jquery,
			form = layui.form,
			dialoger = layui.dialoger,
			select = layui.select;
			$.getJSON('${_context}/api/sys/chart/data?id=${vo.id}',function(res){
				if(res.error == '0'){
					readerChart(res.data);
				}else{
					dialoger.alertError(res.message);
				}
			});
	});

	function readerChart(option){
		var defaults = {
			title : { text: '堆叠柱状图'},
			tooltip : {
				trigger: 'axis'
			},
			toolbox: {
				show : true,
				feature : {
					saveAsImage : {show: true}
				}
			},
			legend: {
				data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis : [
				{
					type : 'category',
					boundaryGap: false,
					data: ['周一','周二','周三','周四','周五','周六','周日']
				}
			],
			yAxis : [
				{
					type : 'value',
					axisLabel : {
						formatter: '{value} '
					}
				}
			],
			series : [
				{
					name:'邮件营销',
					type:'line',
					stack: '总量',
					data:[120, 132, 101, 134, 90, 230, 210]
				},
				{
					name:'联盟广告',
					type:'line',
					stack: '总量',
					data:[220, 182, 191, 234, 290, 330, 310]
				},
				{
					name:'视频广告',
					type:'line',
					stack: '总量',
					data:[150, 232, 201, 154, 190, 330, 410]
				},
				{
					name:'直接访问',
					type:'line',
					stack: '总量',
					data:[320, 332, 301, 334, 390, 330, 320]
				},
				{
					name:'搜索引擎',
					type:'line',
					stack: '总量',
					data:[820, 932, 901, 934, 1290, 1330, 1320]
				}
			]
		};   
		defaults.title.text = option.title;
		defaults.legend.data = option.legend;
		defaults.xAxis[0].data = option.data;
		defaults.yAxis[0].axisLabel.formatter += option.yformatter;
		defaults.series = option.series;
		myChart.setOption(defaults);      
	}
	
   
</script>
</@defaultLayout.layout>